<template>
  <el-dialog title="字段类型映射" :visible.sync="singleTableMappingModalShow" width="40%">
    <el-row :gutter="20">
      <el-col :span="6" class="lable-title">
        字段名
      </el-col>
      <el-col :span="8" class="lable-title">
        字段类型
      </el-col>
      <el-col :span="10" class="lable-title">
        java类型
      </el-col>
    </el-row>
    <hr/>
    <div class="mapping-body" ref="mappingbody">
      <el-row :gutter="20" v-for="(mapping,index) in singleTableMapping.mappings" :key="index" class="row-mapping">
        <el-col :span="6" class="mapping-col column-desp">
          {{mapping.columnName}}
        </el-col>
        <el-col :span="8" class="mapping-col column-desp">
          {{mapping.columnType}}
        </el-col>
        <el-col :span="10" class="mapping-col">
          <el-select placeholder="请选择类型" v-model="mapping.javaType.fullName" v-bind:column="mapping.columnName">
            <el-option :value="javaType.fullName" v-for="(javaType,index) in singleTableMapping.javaTypes" :key="index"
                       :label="javaType.fullName"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="singleTableMappingModalShow = false">取 消</el-button>
      <el-button type="primary" @click="setSingleTableMapping">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "SingleTableMappingModal",
    /* components: {DbType2JavaType},*/
    computed: {
      ...mapState(["singleTableMapping"]),
      singleTableMappingModalShow: {
        get() {
          return this.$store.getters.singleTableMappingModalShow;
        },
        set(flag) {
          this.$store.dispatch("singleTableMappingModalShow", flag);
        }
      }
    }, methods: {
      setSingleTableMapping() {
        let children = this.$refs.mappingbody.getElementsByTagName("input");
        let singleTableMappings = [];
        for (let i = 0; i < children.length; i++) {
          let ele = children[i];
          let column = ele.parentNode.parentNode.getAttribute("column");
          let javaType = ele.value;
          singleTableMappings.push({column: column, javaType: javaType});
        }
        this.$store.dispatch("setSingleTableMapping", singleTableMappings);
        this.$store.dispatch("singleTableMappingModalShow", false);
      }
    }, mounted() {


    }
  }

</script>

<style scoped>
  .mapping-body {
    height: 375px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .mapping-col {
    text-align: center;
  }

  .lable-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }

  .column-desp {
    padding-top: 10px;
    font-size: 16px;
  }

  .row-mapping {
    margin-bottom: 5px;
  }
</style>
